<template>
  <div class="city_choose">
    <my-header></my-header>
    <div class="container w">
      <!-- 面包屑导航 -->
      <div class="header__breadcrumb">
        <div><router-link to="/" class="index">首页</router-link></div>
        <div>&gt;</div>
        <div>城市选择页</div>
      </div>
      <!-- 搜索直达 -->
      <h3 class="title">搜索直达</h3>
      <!-- 输入城市名或拼音查询 -->
      <div class="searchByletter">
        <input type="text" placeholder="输入城市名或拼音查询" />
      </div>
      <!-- 热门城市 -->
      <h3 class="title">热门城市</h3>
      <div class="hot_list">
        <a
          class="hot_item"
          v-for="(item, i) of hot_city"
          :key="i"
          @click="changeCity(item)"
          >{{ item }}</a
        >
      </div>
      <!-- 城市列表 -->
      <h3 class="title">城市列表</h3>
      <div class="all_jump_bar">
        <div class="left">按拼音首字母查询：</div>
        <div class="right">
          <div
            v-for="item of letters"
            :key="item"
            @click="selectCityByLetter(item)"
            :class="currentLetter == item ? 'letterActive' : false"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <!-- 城市大列表 -->
      <div class="city_content">
        <!-- 城市列表组 -->
        <div
          class="city_list"
          v-for="(item, i) of cityList"
          :key="i"
          v-show="
            currentLetter == '' ? true : currentLetter == i ? true : false
          "
        >
          <div class="item_letter">{{ i }}</div>
          <div class="item_city">
            <a
              href="#"
              v-for="(item2, i2) of item"
              :key="i2"
              @click="changeCity(item2.fullName)"
              >{{ item2.fullName }}</a
            >
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import cityList from "../../public/lib/map.js";
// 使用VueX实现全网站的城市选择与切换
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      // 城市清单
      cityList: {},
      //   字母几个
      letters: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
      //   热门城市
      hot_city: [
        "深圳",
        "北京",
        "丽江",
        "三亚",
        "大理",
        "沈阳",
        "合肥",
        "重庆",
        "苏州",
        "长沙",
        "大连",
        "厦门",
        "上海",
        "西安",
        "南京",
        "武汉",
        "青岛",
        "成都",
        "郑州",
        "杭州",
        "昆明",
        "天津",
        "广州",
      ],
      // 按照字母筛选城市
      currentLetter: "",
    };
  },
  mounted() {
    console.log(cityList);
    // 将引入的城市列表json文件导入后给到data中的变量保存
    this.cityList = cityList;
  },
  methods: {
    ...mapMutations(["changeMyCity"]),
    //   更改城市的事件
    changeCity(city) {
      console.log(city);
      this.changeMyCity(city);
      this.$router.push("/cityIndex");
    },
    // 按照字母筛选城市
    selectCityByLetter(currentLetter) {
      this.currentLetter = currentLetter;
    },
  },
};
</script>
<style>
@import url(/css/choose_city.css);
</style>